<template>
	<view class="container">
		<view class="top-info">
			<view>
				<text style="margin-right: 20rpx;">联系电话</text>
				<text>18666610000</text>
			</view>
			<button type="primary" plain class="top-btn">自动填写</button>
		</view>
		<view class="takefood-area">
			<view class="title">取餐时间</view>
			<view style="color: $color-primary;">冰淇淋/鲜食等产品无需等待，可立即向店员领取</view>
		</view>
		<view class="list">
			<view class="title">商品列表</view>
			<list-cell arrow line-right>
				<view class="list-content">
					<scroll-view class="list-screw" scroll-x>
						<view class="list-item">
							<image :src="item.image" class="pro-img" v-for="(item, index) in cart" :key="index"></image>
						</view>
					</scroll-view>
					<view class="list-bottom">共{{ cartNum }}件</view>				
				</view>
			</list-cell>
			<list-cell arrow last>
				<view class="coupon-area">
					<view class="coupon">
						<view>优惠券</view>
						<view class="coupon-label">劵</view>
					</view>
					<view class="text-color-assist">暂无可用</view>
				</view>
			</list-cell>
			<list-cell arrow last>
				<view class="remark-area">
					<view class="flex-shrink-0">备注</view>
					<navigator hover-class="none" class="remark-nav" open-type="navigate" 
					url="./paydetail.vue">{{ remark }}</navigator>
				</view>
			</list-cell>
			<list-cell last>
				<view class="sum-area">
					<text style="font-size:$font-size-sm;">共{{ cartNum }}件商品，小计</text>
					<text style="font-size:font-size-lg; font-weight:bold;">￥{{ cartAmount }}</text>
				</view>
			</list-cell>
		</view>
		<list-cell last>
			<view class="payway-area">
				<view>支付方式</view>
				<view class="d-flex align-items-center">
					<image src="/static/pay/wx-pay.png" class="wx-pay-icon"></image>
					<view>微信</view>
				</view>
			</view>
		</list-cell>
		<view class="footer">
			<view class="mr-30">
				合计：<text class="footer-sum">￥{{ cartAmount }}</text>
			</view>
			<button type="primary" @tap="payModal()">支付</button>
		</view>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell.vue'
	
	export default {
		components: {
			listCell
		},
		data() {
			return {
				remark:'remark',
				cartAmount:6,
				cartNum:1,
				cart: uni.getStorageSync('cart'),
			}
		},
		computed: {
			// cartNum() {
			// 	return this.cart.reduce((acc, cur) => acc + cur.number, 0)
			// },
			// cartAmount() {
			// 	return this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
			// },
			// remark() {
			// 	return this.$store.state.remark
			// }
		},
		methods:{
			payModal(){
				uni.showModal({
					title: '支付',
					content: '支付成功',
					success: function (res) {
						if (res.confirm) {
							console.log('支付中...');
						} else if (res.cancel) {
							console.log('取消支付');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: auto;
		padding-bottom: 120rpx;
	}
	
	.mb-20{
		margin-bottom: 20rpx;
	}
	
	.mb-30{
		margin-bottom: 30rpx;
	}
	
	.mr-20{
		margin-right: 20rpx;
	}
	
	.mr-30{
		margin-right: 30rpx;
	}
	
	.top-info{
		background-color: white;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
	
	.top-btn{
		font-size: 20rpx;
		line-height: 1;
		width: 200rpx;
		align-items: center;
	}
	
	.pro-img {
		width: 120rpx;
		height: 90rpx;
		flex-shrink: 0;
	}
	
	.takefood-area{
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.title{
			font-size: $font-size-base;
			font-weight: bold;
			margin-bottom: 30rpx;
			padding-left: 30rpx;
		}
	}
	
	.list{
		flex: 1;
		background-color: #ffffff;
		padding-top: 30rpx;
		margin-bottom: 20rpx;
		
		.title{
			font-size: $font-size-base;
			font-weight: bold;
			margin-bottom: 30rpx;
			padding-left: 30rpx;
		}
		
		.list-content{
			width: 100%;
			display: flex;
			align-items: center;
			overflow: hidden;
		}
		
		.list-screw{
			display: flex;
			overflow: hidden;
		}
		
		.list-item{
			width: 100%;
			display: flex;
			align-items: center;
		}
		
		.list-bottom{
			flex-shrink: 20rpx;
			margin-left: 20rpx;
		}
	}
	
	.coupon-area{
		display: flex;
		align-items: center;
		justify-content: space-between;
		//w-100
	}
	
	.coupon{
		display: flex;
		align-items: center;
	}
	
	.coupon-label {
		background-color: $color-primary;
		color: #FFFFFF;
		font-size: 18rpx;
		line-height: 0.9rem;
		width: 0.9rem;
		height: 0.9rem;
		margin-left: 10rpx;
		text-align: center;
	}
	
	.remark-area{
		width: 100%;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;
		.remark-nav{
			display: flex;
			text-align: right;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
	}
	
	.sum-area{
		width: 100%;
		display: flex;
		justify-content: end;
		align-items: center;
	}
	
	.payway-area{
		width: 100;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.wx-pay-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	
	.footer {
		background-color: #FFFFFF;
		z-index: 10;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		
		button {
			width: 250rpx;
			text-align: center;
			padding: 0;
			height: 100%;
			line-height: 100rpx;
			border-radius: 0 !important;
			font-size: $font-size-lg;
		}
		
		.footer-sum{
			font-style: $font-size-lg;
			font-weight: bold;
		}
	}
</style>